<!--
  @created by panglinxia on 2020-4-2 09:51:18
  @updated by
  @description 首页
-->
<div class="yu-dashboard-container">
  <yu-row :gutter="24">
    <yu-col :span="6">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>任务</h1>
        </div>
        <div class="yu-dashboard-content flex-center num-box">
          <div class="flex-f1 exception">
            <div>{{overview.task.errorCnt}}</div>
            <span class="description">异常</span>
          </div>
          <div class="flex-f1 all">
            <div>{{overview.task.allCnt}}</div>
            <span class="description">全部</span>
          </div>
        </div>
      </div>
    </yu-col>
    <yu-col :span="6">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>服务</h1>
        </div>
        <div class="yu-dashboard-content flex-center num-box">
          <div class="flex-f1 exception">
            <div>{{overview.service.errorCnt}}</div>
            <span class="description">异常</span>
          </div>
          <div class="flex-f1 all">
            <div>{{overview.service.allCnt}}</div>
            <span class="description">全部</span>
          </div>
        </div>
      </div>
    </yu-col>
    <yu-col :span="6">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>事件</h1>
        </div>
        <div class="yu-dashboard-content flex-center num-box">
          <div class="flex-f1 exception">
            <div>{{overview.event.errorCnt}}</div>
            <span class="description">异常</span>
          </div>
          <div class="flex-f1 all">
            <div>{{overview.event.allCnt}}</div>
            <span class="description">全部</span>
          </div>
        </div>
      </div>
    </yu-col>
    <yu-col :span="6">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>资源</h1>
        </div>
        <div class="yu-dashboard-content flex-center num-box">
          <div class="flex-f1 exception">
            <div>{{overview.resource.errorCnt}}</div>
            <span class="description">异常</span>
          </div>
          <div class="flex-f1 all">
            <div>{{overview.resource.allCnt}}</div>
            <span class="description">全部</span>
          </div>
        </div>
      </div>
    </yu-col>

    <yu-col :span="12">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>当日报警数</h1>
        </div>
        <div class="yu-dashboard-content yu-error-box">
          <div class="yu-error-num">
            <span>{{warnNum}}</span>
          </div>
          <div class="yu-error-echart">
            <yu-echarts :option="warnEchartOption"></yu-echarts>
          </div>
        </div>
      </div>
    </yu-col>
    <yu-col :span="12">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>当日出错数</h1>
        </div>
        <div class="yu-dashboard-content yu-error-box">
          <div class="yu-error-num">
            <span>{{errorNum}}</span>
          </div>
          <div class="yu-error-echart">
            <yu-echarts :option="errorEchartOption"></yu-echarts>
          </div>
        </div>
      </div>
    </yu-col>
    <yu-col :span="12">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>服务状态</h1>
          <a href="javascript:void(0);" class="yu-icon-refresh" @click="getServiceTableData" title="刷新"></a>
        </div>
        <div class="yu-dashboard-content yu-status-box">
          <yu-xtable class="service-table" :data="serviceTableData" row-number :pageable="false" :row-number="false">
            <yu-xtable-column label="服务明细" prop="typeName"></yu-xtable-column>
            <yu-xtable-column label="数量" prop="dataColumn1"></yu-xtable-column>
            <yu-xtable-column label="部署" prop="dataColumn2"></yu-xtable-column>
            <yu-xtable-column label="服务" prop="dataColumn3"></yu-xtable-column>
            <yu-xtable-column label="备用" prop="dataColumn4"></yu-xtable-column>
            <yu-xtable-column label="未知" prop="dataColumn5"></yu-xtable-column>
          </yu-xtable>
        </div>
      </div>
    </yu-col>
    <yu-col :span="12">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>任务状态</h1>
          <a href="javascript:void(0);" class="yu-icon-refresh" @click="getTaskAndWorkTableData" title="刷新"></a>
        </div>
        <div class="yu-dashboard-content yu-status-box">
          <yu-xtable class="task-table" :data="taskTableData" row-number :pageable="false" :row-number="false">
            <yu-xtable-column label="任务" prop="typeName"></yu-xtable-column>
            <yu-xtable-column label="总数" prop="dataColumn1"></yu-xtable-column>
            <yu-xtable-column label="等待" prop="dataColumn2"></yu-xtable-column>
            <yu-xtable-column label="运行" prop="dataColumn3"></yu-xtable-column>
            <yu-xtable-column label="停止" prop="dataColumn4"></yu-xtable-column>
            <yu-xtable-column label="完成" prop="dataColumn5"></yu-xtable-column>
          </yu-xtable>
          <yu-xtable class="work-table" :data="workTableData" row-number :pageable="false" :row-number="false">
            <yu-xtable-column label="作业" prop="typeName"></yu-xtable-column>
            <yu-xtable-column label="总数" prop="dataColumn1"></yu-xtable-column>
            <yu-xtable-column label="等待" prop="dataColumn2"></yu-xtable-column>
            <yu-xtable-column label="运行" prop="dataColumn3"></yu-xtable-column>
            <yu-xtable-column label="停止" prop="dataColumn4"></yu-xtable-column>
            <yu-xtable-column label="完成" prop="dataColumn5"></yu-xtable-column>
          </yu-xtable>
        </div>
      </div>
    </yu-col>
    <yu-col :span="12">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>资源状态</h1>
          <a href="javascript:void(0);" class="yu-icon-refresh" @click="getResourceTableData" title="刷新"></a>
        </div>
        <div class="yu-dashboard-content yu-event-box">
          <yu-xtable :data="resourceTableData" row-number :pageable="false" :row-number="false">
            <yu-xtable-column label="服务明细" prop="typeName"></yu-xtable-column>
            <yu-xtable-column label="总数" prop="dataColumn1">
              <template slot-scope="scope">
                <span>{{scope.row.dataColumn1}}</span>
              </template>
            </yu-xtable-column>
            <yu-xtable-column label="正常" prop="dataColumn2">
              <template slot-scope="scope">
                <span>{{scope.row.dataColumn2}}</span>
              </template>
            </yu-xtable-column>
            <yu-xtable-column label="预警" prop="dataColumn3">
              <template slot-scope="scope">
                <span :class="{'color-warn': scope.row.dataColumn3 > 0}">{{scope.row.dataColumn3}}</span>
              </template>
            </yu-xtable-column>
            <yu-xtable-column label="报警" prop="dataColumn4">
              <template slot-scope="scope">
                <span :class="{'color-warn': scope.row.dataColumn4 > 0}">{{scope.row.dataColumn4}}</span>
              </template>
            </yu-xtable-column>
            <yu-xtable-column label="未知" prop="dataColumn5">
              <template slot-scope="scope">
                <span :class="{'color-warn': scope.row.dataColumn5 > 0}">{{scope.row.dataColumn5}}</span>
              </template>
            </yu-xtable-column>
          </yu-xtable>
        </div>
      </div>
    </yu-col>
    <yu-col :span="12">
      <div class="yu-dashboard-box">
        <div class="yu-dashboard-title">
          <h1>事件状态</h1>
          <a href="javascript:void(0);" class="yu-icon-refresh" @click="getEventTableData" title="刷新"></a>
        </div>
        <div class="yu-dashboard-content yu-event-box">
          <yu-xtable :data="eventTableData" row-number :pageable="false" :row-number="false">
            <yu-xtable-column label="服务明细" prop="typeName" width="80px"></yu-xtable-column>
            <yu-xtable-column label="事件总数" prop="dataColumn1" width="80px"></yu-xtable-column>
            <yu-xtable-column label="已发生事件" prop="dataColumn2"></yu-xtable-column>
            <yu-xtable-column label="未发生文件事件" prop="dataColumn3"></yu-xtable-column>
            <yu-xtable-column label="未发生普通事件" prop="dataColumn4"></yu-xtable-column>
            <yu-xtable-column label="未发生自动事件" prop="dataColumn5"></yu-xtable-column>
          </yu-xtable>
        </div>
      </div>
    </yu-col>
  </yu-row>
</div>